<template>
    <div>
        <Button type="primary" @click="newSite">新增预约</Button>
        <Button type="primary" @click="function() {myModal = true}" style="margin-left: 10px;">使用方法</Button>
        <Divider/>
        <Table border :loading="loading" :columns="columns" :data="data"></Table>
        <editBookingSetting :editModal="editBookingModel" :id="siteId" v-on:editBookingSettingChild="editBookingSettingChild" @refreshList="init"></editBookingSetting>
        <bookingSetting :modal="bookingSettingModel" v-on:bookingSettingChild="bookingSettingChild" @refreshList="init"></bookingSetting>

        <Modal v-model="myModal" title="使用方法" :footer-hide="true" :styles="{top: '0px'}">
            <section class="_editor">
                <p>
                    <br/>
                </p>
            </section>
            <section class="_editor_bg" style="">
                <section class="_editor">
                    <section class="tool-border">
                        <section></section>
                        <section></section>
                        <section></section>
                        <section></section>
                    </section>
                    <section style="margin: 5px 5px;background: #b8e6ff;border-radius: 15px;text-align: center;padding: 10px;box-sizing: border-box;">
                        <section style="background-color:#ffffff;border-radius: 15px;">
                            <section style="border-radius: 15px;border-style: solid;border-width: 1px;border-color: #000000;box-sizing: border-box;">
                                <section style="box-sizing: border-box;padding: 20px 15px;text-align: left;">
                                    <p style="text-align: justify; border-radius: 15px 15px 0px 0px; box-sizing: border-box;">
                                        <span style="color:#6c444f"><span style="font-size: 14px; letter-spacing: 1px;">感谢使用轻化预约小程序，后台可新增，设置预约场，审核预约信息等。小程序基于手机微信客户端，拥有众多入口。下面将对本小程序的使用做一下说明。希望对您的使用有帮助！</span></span>
                                    </p>
                                    <p style="text-align: justify; border-radius: 15px 15px 0px 0px; box-sizing: border-box;">
                                        <span style="color:#6c444f"><span style="font-size: 14px; letter-spacing: 1px;">意见反馈bug提交请联系软件开发者杨铁龙电话：18040417207&nbsp; &nbsp;QQ：1327282762</span></span>
                                    </p>
                                </section>
                                <section style="margin-top:-40px;text-align: right;">
                                    <section style="width: 50px;display: inline-block;">
                                        <span style="display: inline-block;width: 100%;color: #6c444f;" data-width="100%"><img src="http://newcdn.96weixin.com/mmbiz.qlogo.cn/mmbiz_png/Ljib4So7yuWgt9eshAyI7iae12yHZCnY5BQN9XOAiaSgrw0u0cLXcyYSw9sn16KpiaYhDKS0wwdGxztBCl0iagGEibqA/640?wx_fmt=png" style="vertical-align: middle; width: 100%; height: auto;" data-width="100%"/></span>
                                    </section>
                                </section>
                            </section>
                        </section>
                    </section>
                </section>
                <section class="_editor">
                    <p>
                        <br/>
                    </p>
                </section>
                <section class="_editor">
                    <section style="margin:10px 0px;display: inline-block;width: auto;">
                        <section style="border-width: 1px;border-style: solid;border-color: #333333;height: 35px;background: #f7e022;margin-left: 8px;margin-right: -6px;box-sizing: border-box;"></section>
                        <section style="border-width: 1px;border-style: solid;border-color: #333333;color: #333333;height: 35px;margin-top: -41px;background-color: #fefefe;box-sizing: border-box;">
                            <section style="display: flex;justify-content: center;align-items: center;">
                                <section style="width: 35px;height: 35px;background: #000;color: #f7e022;font-weight: bold;font-size: 18px;line-height: 30px;text-align: center;">
                                    一
                                </section>
                                <section style="font-size: 16px;font-weight: bold;text-align: center;letter-spacing: 1.5px;line-height: 32px;padding-right: 15px;padding-left: 15px;box-sizing: border-box;">
                                    绑定到微信公众号
                                </section>
                            </section>
                        </section>
                    </section>
                </section>
                <section class="_editor">
                    登陆微信公众号-点击小程序管理-关联小程序-填入下面APPID等待审核通过（发起审核时请联系开发者及时处理申请）
                    <pre style="background-color:#2b2b2b;color:#a9b7c6;font-family:&#39;Menlo&#39;;font-size:10.5pt;">APPID：wx5a0c1e1400bda676</pre>
                    <p>
                        <img src="http://pic.96weixin.com/ueditor/20181103/1541214532258449.png" style="vertical-align: middle; width: 100%; height: auto;"  title="1541214532258449.png" alt="WX20181103-110823@2x.png"/><br/>
                    </p>
                    <p>
                        审核通过后编辑菜单栏，选择跳转小程序，您需要设置的小程序路径为
                    </p>
                    <p>
                        {{lujing}}
                    </p>
                    <p>
                        备用网页请填入https://susebooking.lights-x.com/beiyong
                    </p>
                    <p>
                        <img src="http://pic.96weixin.com/ueditor/20181103/1541214459634316.png" style="vertical-align: middle; width: 100%; height: auto;" title="1541214459634316.png" alt="图片 1.png"/><br/>
                    </p>
                </section>
            </section>
            <section class="_editor">
                <section style="margin:10px 0px;display: inline-block;width: auto;">
                    <section style="border-width: 1px;border-style: solid;border-color: #333333;height: 35px;background: #f7e022;margin-left: 8px;margin-right: -6px;box-sizing: border-box;"></section>
                    <section style="border-width: 1px;border-style: solid;border-color: #333333;color: #333333;height: 35px;margin-top: -41px;background-color: #fefefe;box-sizing: border-box;">
                        <section style="display: flex;justify-content: center;align-items: center;">
                            <section style="width: 35px;height: 35px;background: #000;color: #f7e022;font-weight: bold;font-size: 18px;line-height: 30px;text-align: center;">
                                二
                            </section>
                            <section style="font-size: 16px;font-weight: bold;text-align: center;letter-spacing: 1.5px;line-height: 32px;padding-right: 15px;padding-left: 15px;box-sizing: border-box;">
                                输入标题
                            </section>
                        </section>
                    </section>
                </section>
            </section>
            <section>
                <p>
                    登陆后天际新增预约或者选择已有预约进行编辑
                </p>
                <p>
                    <img src="http://pic.96weixin.com/ueditor/20181103/1541216124821449.png" style="width: 100%;" title="1541216124821449.png"/>
                </p>
                <p>
                    可根据提示进行预约设置
                </p>
                <p>
                    <img src="http://pic.96weixin.com/ueditor/20181103/1541216124118827.png" title="1541216124118827.png" style=";width: 98%;"/><br/>
                </p>
                <p>
                    <img src="http://pic.96weixin.com/ueditor/20181103/1541216124347171.png"  style="width: 100%;" title="1541216124347171.png"/>
                </p>
                <p style="color: red;">
                    注意，表单信息 需根据下载模版里提供的内容格式进行上传。excel有两列值，name为问题的名字，type为该问题的格式；每一个name问题值必须对应一个type；type只有三个值可以填入（phone，input，textarea）
                </p>
                <p>
                    <br/>
                </p>
            </section>
            <section class="_editor">
                <section style="margin:10px 0px;display: inline-block;width: auto;">
                    <section style="border-width: 1px;border-style: solid;border-color: #333333;height: 35px;background: #f7e022;margin-left: 8px;margin-right: -6px;box-sizing: border-box;"></section>
                    <section style="border-width: 1px;border-style: solid;border-color: #333333;color: #333333;height: 35px;margin-top: -41px;background-color: #fefefe;box-sizing: border-box;">
                        <section style="display: flex;justify-content: center;align-items: center;">
                            <section style="width: 35px;height: 35px;background: #000;color: #f7e022;font-weight: bold;font-size: 18px;line-height: 30px;text-align: center;">
                                三
                            </section>
                            <section style="font-size: 16px;font-weight: bold;text-align: center;letter-spacing: 1.5px;line-height: 32px;padding-right: 15px;padding-left: 15px;box-sizing: border-box;">
                                更多玩法
                            </section>
                        </section>
                    </section>
                </section>
            </section>
            <section class="_editor" style=" margin: 0px auto;width: 79%;">
                <p>
                    <br/>
                </p>
                <p style="text-align: center;">
                    点击右上角的三个点-添加到桌面
                </p>
                <p>
                    <br/>
                </p>
                <p style="text-align:center">
                    <img src="http://pic.96weixin.com/ueditor/20181103/1541215155326307.jpeg" style=";width: 30%;" title="1541215155326307.jpeg"/>
                </p>
                <p>
                    <br/>
                </p>
                <p style="text-align: center;">
                    微信主界面下拉，有您最近使用的小程序
                </p>
                <p>
                    <br/>
                </p>
                <p style="text-align:center">
                    <img src="http://pic.96weixin.com/ueditor/20181103/1541215155331072.jpeg" style=";width: 30%;" title="1541215155331072.jpeg"/>
                </p>
                <p style="text-align: center;">
                    <br/>
                </p>
                <p style="text-align: center;">
                    长按小程序图标可以添加到“我的小程序目录中”
                </p>
                <p>
                    <br/>
                </p>
                <p style="text-align:center">
                    <img src="http://pic.96weixin.com/ueditor/20181103/1541215155641408.jpeg" style=";width: 31%;" title="1541215155641408.jpeg"/>
                </p>
            </section>
        </Modal>

    </div>
</template>
<script>
    import {getMySite,deleteSite} from '../../../api/manager'
    import bookingSetting from '../../bookingsetting/bookingsetting'
    import editBookingSetting from '../../bookingsetting/editbookingsetting'
    export default {
        data() {
            return {
                lujing:'pages/home/home?adminId=',
                myModal:false,
                columns: [
                    {
                        title: '编号',
                        key: 'id',
                        width:80,
                        align: 'center',
                        fixed: 'left'
                    },
                    {
                        title: '缩略图',
                        key: 'img_url',
                        align: 'center',
                        width:80,
                        render: (h, params) => {
                            return h('div', [
                                h('Avatar', {
                                    props: {
                                        src:params.row.img_url,
                                        size: 'large',
                                        shape:'square'
                                    }

                                })
                            ]);
                        }
                    },
                    {
                        title: '预约名称',
                        key: 'name',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        }
                    },
                    {
                        title: '简介',
                        key: 'desc'
                    },
                    {
                        title: '尾部',
                        key: 'address'
                    },
                    {
                        title: '提示',
                        key: 'note'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        fixed: 'right',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params.row.id)
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.$Modal.confirm({
                                                title: '警告⚠️',
                                                content: '<p>点击确定此数据将会删除</p>',
                                                loading: true,
                                                onOk: () => {
                                                    deleteSite(params.row.id).then(res => {
                                                        this.$Modal.remove();
                                                        if (res.code === 0){
                                                            this.$Message.info('删除成功');
                                                            this.init()
                                                        } else {
                                                            this.$Message.error('删除失败');
                                                        }
                                                    })
                                                }
                                            });
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                data: [],
                loading:true,
                editBookingModel:false,
                bookingSettingModel:false,
                siteId:0,
            }
        },
        components:{
            bookingSetting,
            editBookingSetting
        },
        methods: {
            bookingSettingChild(value){
                this.bookingSettingModel=value
            },
            editBookingSettingChild(value){
                this.editBookingModel=value
            },
            edit(index) {
                this.siteId = index
                this.editBookingModel = true
            },
            remove(index) {
                this.data.splice(index, 1);
            },
            newSite() {
                this.bookingSettingModel = true
                // this.miniLoginForm()
            },
            init(){
                this.loading = true
                getMySite().then(res => {
                    this.loading = false
                    if (res.code === 0){
                        this.data = res.data
                    }
                })
                console.log()
                this.lujing = this.lujing+this.$store.state.user.userId
            }
        },
        mounted(){
            this.init();
        }
    }
</script>

<style scoped>
img {
    width: 100%;
}
</style>
